<template>
  <div>
    <div class="text">About</div>
    <div>
      <ul>
<!--        <li><router-link to="/about/news/5/gfdsagdf">News</router-link></li>-->
        <li><router-link :to="{
          name:'news',
          params:{
            id:6,
            name:'kitty'
          }
        }">News</router-link></li>
        <li><router-link :to="{
          name:'message',
          // params: {
          //   id:'001',
          //   title:'昨日新闻'
          // }
          query:{
            id:'003',
            title:'明日新闻'
          }
        }">props配置传参</router-link></li>
        <li><button @click="goButton()">编程式路由导航</button></li>
      </ul>
    </div>
    <div>
      <keepAlive :include="['Message']">
        <router-view></router-view>
      </keepAlive>

    </div>
  </div>
</template>

<script>
export default {
  name: "About",
  methods:{
    goButton(){
      this.$router.push({
          name:'buttonRouter',
          query:{id:1}
      })
    }
  },
  beforeRouteEnter(to,from,next){
    console.log('进入',to,from,next)
    //这里不调用next(),实际并未真实进入组件
    next()
  },
  beforeRouteLeave(to,from,next){
    console.log('离开',to,from,next)
  }
}
</script>

<style scoped>
.text{
  font-size: 25px;
}
</style>